<template>
  <el-dialog
    :title="`${title}明细`"
    :modelValue="modelValue"
    align-center
    width="936px"
    class="public-dialog"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="text-[14px] text-[var(--base-text-color)] leading-[20px] mr-[32px]">
      入仓时间：{{ data?.["entry_warehouse_time"] || "-" }}
    </div>
    <div v-if="id" class="flex flex-wrap my-[16px]">
      <div
        class="text-[14px] text-[var(--base-text-color)] leading-[20px] mr-[32px]"
        v-for="item in headInfo"
        :key="item.label"
      >
        <span>{{ item.label }}：</span>
        <span>{{ getLabel(data?.[item.field]) }}</span>
      </div>
    </div>
    <vxe-grid ref="tableRef" v-bind="tableOptions" />
    <template #footer>
      <div class="dialog-button">
        <el-button @click="handleClose(false)"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import { transportCostDetail } from "../../api";

const props = defineProps({
  modelValue: { type: Boolean, default: true },
  id: { type: [String, Number, Object], default: "" },
  data: { type: Object, default: () => ({}) },
  title: { type: String, default: "" },
});

const headInfo = [
  { label: "渠道", field: "channel_name" },
  { label: "物流单号", field: "tracking_number" },
  { label: "备库单号", field: "initial_backup_order_number" },
];

const emit = defineEmits(["update:modelValue", "close"]);

const tableRef = ref();

const isArray = (val) =>
  Object.prototype.toString.call(val) === "[object Array]";

const getLabel = (e) => {
  if (isArray(e)) {
    return e.join(",");
  }
  return e;
};
const title = computed(() => props.title);
watch(
  () => [props.id, props.data],
  () => {
    if (props?.data?.surcharge?.length && props.id) {
      let obj = props?.data?.surcharge.find(
        (item) => item.cost_ident == props.id
      );
      // title.value = `${obj.cost_label}明细`;
      tableOptions.data = props?.data?.surcharge?.filter(
        (item) => item.cost_ident == props.id || item.cost_cate == props.id
      );
    }
  }
);
const tableOptions = reactive({
  round: true,
  height: "400",
  columnConfig: {
    resizable: true,
  },
  columns: [
    { title: "付款主体", minWidth: 60, field: "pay_main_company_name" },
    { title: "费用名称", minWidth: 60, field: "cost_label" },
    { title: "币种", minWidth: 60, field: "bill_currency" },
    { title: "汇率", minWidth: 60, field: "exchange_rate" },
    { title: "金额", minWidth: 60, field: "cost_value" },
    { title: "CNY金额", minWidth: 60, field: "cost_value_cny" },
  ],
  data: [],
});

const handleClose = () => {
  tableOptions.data = []
  emit("update:modelValue", false);
  emit("close");
};
</script>
